<template>
	<view class="goods-content">
		<ycy-top-bar>商品出库</ycy-top-bar>
		<u-toast ref="uToast"></u-toast>
		<view class="search">
			<u-search shape="square" placeholder="请输入商品关键字搜索" v-model="name" searchIconColor="#9dae8a" @clear="getGoodsList" @custom="getGoodsList"></u-search>
		</view>
		<view class="main-box" :style="mainBoxStyle">
			<view class="side-bar"><ycy-side-bar ref="sideBarRef" textKey="name" :list="typeList" @onCilck="onSideBarCilck"></ycy-side-bar></view>
			<view class="main" :style="searchStyle">
				<view class="goods-list">
					<view v-if="goodsList.length == 0" style="position: absolute; left:60%; top: 50%; transform: translate(-50%,-50%);">
						<u-empty mode="order" iconColor="#9dae8a" textColor="#9dae8a" textSize="16" text="暂无该类商品"></u-empty>
					</view>
					<ycy-goods-list v-else titleKey="name" :slideOption="options" :list="goodsList" @onItemClick="check" @onBtnClick="onBtnClick"></ycy-goods-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		async mounted() {
			uni.createSelectorQuery().select('.side-bar').boundingClientRect(data => {
				this.sideBarWidth = data.width;
				this.mainBoxOffset = data.top;
			}).exec();
			await this.getGoodsTypeList();
			this.getGoodsList();
		},
		data() {
			return {
				outItem: {},
				mainBoxOffset: 0,
				sideBarWidth: 0,
				activeItem: { id: '', name: '全部' },
				name: '',
				options: [{
						text: '出库',
						style: {
							backgroundColor: '#9dae8a'
						}
					}
				],
				typeList: [],
				goodsList: []
			}
		},
		computed: {
			searchStyle() {
				return `width: calc(100% - ${this.sideBarWidth}px)`;
			},
			mainBoxStyle() {
				return `height: calc(100% - ${this.mainBoxOffset}px)`;
			}
		},
		methods: {
			onSideBarCilck(activeObject) {
				this.activeItem = activeObject.item;
				this.getGoodsList();
			},
			onBtnClick(btnObject) {
				const index = btnObject.index;
				const item = JSON.parse(btnObject.name);
				this.outbound(item);
			},
			check(clickItem) {
				uni.navigateTo({ url: `./outbound?type=check&&goodsId=${ clickItem.item.id }` })
				// console.log('查看', clickItem.item)
			},
			outbound(item) {
				uni.navigateTo({ url: `./outbound?type=outbound&&goodsId=${ item.id }` })
				// console.log('出库', item)
			},
			async onSearch() {
				const res = await this.$api.goodsManage.findAll('',this.name);
				if(res.code == 200) {
					// this.$refs.sideBarRef.activeIndex = 0;
					// this.activeItem = this.typeList[0];  //全部
					this.goodsList = res.data;
				}
				else this.$toast.error(this,res.message)
			},
			async getGoodsList() {
				const res = await this.$api.goodsManage.findAll(this.activeItem.id,this.name);
				if(res.code == 200) this.goodsList = res.data;
				else this.$toast.error(this,res.message)
			},
			async getGoodsTypeList() {
				const res = await this.$api.goodsType.findAll(this.name);
				if(res.code == 200) {
					this.typePickerList = [[...res.data]];
					this.typeList = res.data;
					this.typeList.unshift({ id: '', name: '全部' })
					// this.activeItem = this.typeList[0];
				}else this.$toast.error(this,res.message)
			}
		}
	}
</script>

<style lang="scss">
	.goods-content {
		height: 100vh;
		position: relative;
		margin-bottom: $safe-bottom-spacing;
		background-color: $gray-bg-color;

		.search {
			padding: $spacing-small 0;
			background-color: $white-bg-color;
		}

		.main-box {
			display: flex;
			height: 100%;

			.side-bar {
				overflow: scroll;
				padding-right: $spacing-small;
			}

			.main {
				overflow: scroll;
				background-color: $white-bg-color;
				padding: $spacing-small;
				
				.goods-list {
					padding-top: $spacing-small;
				}
			}
		}
	}
</style>